import { useState, useEffect } from 'react';
import MyEcharts from './components/my-echarts';
import './App.css';

function getRandomData () {
  return [
    {
      day: 'mon',
      value: Math.random() * 100,
    },
    {
      day: 'mon',
      value: Math.random() * 100,
    },
    {
      day: 'mon',
      value: Math.random() * 100,
    },
    {
      day: 'mon',
      value: Math.random() * 100,
    },
  ];
}

function App() {
  const [data, setData] = useState(getRandomData());

  // mounted
  useEffect(() => {
    setInterval(() => {
      const newData = getRandomData();
      setData(newData);
    }, 1000);
  }, []);

  const option = {
    xAxis: {
      type: 'category',
      data: data.map(d => d.day),
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.map(d => d.value),
        type: 'line'
      }
    ]
  };

  return (
    <div className="app">
      <MyEcharts option={ option } />
    </div>
  );
}

export default App
